<template>
	<span class="app-mob-caption-bar__icon">
		<img v-if="imgPath" :src="imgPath" />
		<i v-else-if="hasIcon(iconClass)" :class="iconClass" />
		<van-icon v-else-if="iconClass" :name="iconClass" />
	</span>
	<span
		class="app-mob-caption-bar"
		:title="titlePSLanguageRes ? $t(titlePSLanguageRes) : title"
		>{{ capPSLanguageRes ? $t(capPSLanguageRes, caption) : caption }}</span
	>
	<span
		class="app-mob-caption-bar__sub"
		v-if="subCapPSLanguageRes || subCaption"
	>
		- {{ subCapPSLanguageRes ? $t(subCapPSLanguageRes) : subCaption }}</span
	>
</template>

<script setup lang="ts">
import { CaptionBarProps } from './caption-bar';
const props = defineProps(CaptionBarProps);
const hasIcon = (cssClass?: string) => {
	return cssClass && cssClass.startsWith('fa fa-');
};
</script>
